<template>
  <div>
    <el-row>
      <el-col :span="24" id="CourseType1">

        <div id="CourseType2">
          <el-input v-model="param.typeName" placeholder="请输入姓名" style="width: 20%;"></el-input>
          <el-button type="primary" @click="search" round>搜索</el-button>
          <el-button type="primary" @click="addCourseType" round>新增类别</el-button>
        </div>

        <div style="height: 20px;"></div>
        <el-table :data="page.records" border>

          <el-table-column prop="classTypeId" label="类别ID" width="105">
          </el-table-column>
          <el-table-column prop="classTypeName" label="类别名" width="150">
          </el-table-column>
          <el-table-column prop="classTypeState" label="类别状态" width="100">
            <template slot-scope="scope">
              <template v-if="scope.row.classTypeState == 0">
                禁用
              </template>
              <template v-if="scope.row.classTypeState == 1">
                正常
              </template>
              <template v-if="scope.row.classTypeState == 2">
                删除
              </template>
            </template>
          </el-table-column>

          <el-table-column label="操作" width="150">
            <template #default="scope">

              <el-button @click="disableType(scope.row.classTypeId)" v-if="scope.row.classTypeState == '1'" type="text"
                size="small">禁用</el-button>
              <el-button @click="enableType(scope.row.classTypeId)" v-if="scope.row.classTypeState == '0'" type="text"
                size="small">启用</el-button>

              <el-button @click="deleteType(scope.row.classTypeId)" v-if="scope.row.classTypeState == '0'" type="text"
                size="small">删除</el-button>
            </template>
          </el-table-column>
        </el-table>

        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
          :current-page="page.pageNum" :page-sizes="[1, 2, 3, 5]" :page-size="page.pageSize"
          layout="total, sizes, prev, pager, next, jumper" :total="page.total">
        </el-pagination>

        <el-dialog title="新增类别" :visible.sync="showAddCourseType" width="30%">
          <el-input v-model="add.typeName" placeholder="请输入新类别名"></el-input>
          <el-button @click="showAddCourseType = false">取 消</el-button>
          <el-button @click="addCourse()" type="primary">确 定</el-button>

        </el-dialog>

      </el-col>
    </el-row>
  </div>
</template>

<script>
  export default {
    name: "CourseTypeManagement",
    data() {
      return {
        add: {}, // 新增的对象
        showAddCourseType: false, //新增窗口
        page: "",
        param: {
          typeName: "",
          pageNum: 1,
          pageSize: 5,
        },
      }
    },
    methods: {
      //新增方法
      addCourse() {
        this.$http.post("product/yClassType/addType", this.add).then(resp => {
          this.$message({
            message: resp.data.msg,
            type: 'success'
          });
          this.showAddCourseType = false;
          this.loadAllCourseType();
        });
      },
      //新增窗口
      addCourseType() {
        this.showAddCourseType = true;
      },
      //搜索按钮
      search() {
        this.param.pageNum = 1;
        this.loadAllCourseType();
      },
      //删除
      deleteType(classTypeId) {
        this.$http.get("/product/yClassType/deleteType", {
          params: {
            classTypeId: classTypeId
          }
        }).then(resp => {
          this.$message({
            message: resp.data.msg,
            type: 'success'
          });
          this.loadAllCourseType();
        });
      },
      //启用
      enableType(classTypeId) {
        this.$http.get("/product/yClassType/enable", {
          params: {
            classTypeId: classTypeId
          }
        }).then(resp => {
          this.$message({
            message: resp.data.msg,
            type: 'success'
          });
          this.loadAllCourseType();
        });
      },
      //禁用
      disableType(classTypeId) {
        this.$http.get("/product/yClassType/disable", {
          params: {
            classTypeId: classTypeId
          }
        }).then(resp => {
          this.$message({
            message: resp.data.msg,
            type: 'success'
          });
          this.loadAllCourseType();
        });
      },
      handleSizeChange(val) {
        this.param.pageSize = val;
        this.loadAllCourseType();
      },
      handleCurrentChange(val) {
        this.param.pageNum = val;
        this.loadAllCourseType();
      },
      loadAllCourseType() {
        this.$http.get("/product/yClassType/loadPageClassType", {
          params: this.param
        }).then(resp => {
          this.page = resp.data.data;
        })
      }
    },
    created() {
      this.loadAllCourseType();
    }
  }
</script>

<style>
  #CourseType2 {
    margin-left: -420px;
    line-height: 100%;
    width: 100%
  }

  #CourseType1 {
    line-height: 100%;
    width: 100%
  }
</style>
